<template>
  <div class="sss" style="background-color: rgb(245, 245, 245)">
    <div class="Box">
      <div class="topBox">
        <img
          src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20231201/20231201153338900074.jpg"
          alt=""
        />
        <div class="goOutBox">
          <div>&lt;</div>
        </div>
        <div class="imgText">(商品图仅供购买参考,实际商品以订单为准)</div>
      </div>
      <div class="detailBox">
        <div class="boxPrice">
          <div class="priceLeft">
            <span class="leftone">￥</span><span class="lefttwo">789</span>
          </div>
          <div class="priceRight">69评价</div>
        </div>
        <div class="boxText">罗技(G)PROXSUPERLIGHT二代白色</div>
      </div>
      <div class="detailBox2" style="display: flex">
        <div class="boxlis1">售后</div>
        <div class="boxlis2">
          <img src="../../assets/正确.png" alt="" style="width: 0.2rem" />
          <div>发货规则</div>
        </div>
        <div class="boxlis2">
          <img src="../../assets/正确.png" alt="" style="width: 0.2rem" />
          <div>关于邮费</div>
        </div>
        <div class="boxlis2">
          <img src="../../assets/正确.png" alt="" style="width: 0.2rem" />
          <div>全新正品</div>
        </div>
      </div>
      <div class="detailBox3">
        <div class="box3Left" style="display: flex">
          <div style="font-weight: bold">选择</div>
          <div style="color: #ccc">鼠标规格</div>
          <div>白色</div>
        </div>
        <div class="box3Right">&gt;</div>
      </div>
    </div>
    <div class="detailbot">
      <div class="botLeft">
        <div class="botleftlis">
          <img src="../../assets/分享.png" alt="" />
          <div class="listext">分享</div>
        </div>
        <div class="botleftlis">
          <img src="../../assets/客服.png" alt="" />
          <div class="listext">人工</div>
        </div>
        <div class="botleftlis">
          <img src="../../assets/购物车.png" alt="" />
          <div class="listext">购物车</div>
        </div>
      </div>
      <div class="botRight" style="display: flex">
        <div class="rightprice" style="display: flex">
          <div style="margin-top: 0.04rem">合计:</div>
          <div style="font-weight: bold">
            <span>￥</span> <span style="font-size: 0.4rem">679</span>
          </div>
        </div>
        <button class="rightshop">加入购物车</button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Box {
  width: 100%;
  height: 15rem;
  background: rgb(245, 245, 245);

  .topBox {
    width: 100%;
    height: 7.48rem;
    // background: red;

    img {
      width: 100%;
      height: 100%;
    }

    .goOutBox {
      width: 0.6rem;
      height: 0.6rem;
      border: 0.02rem solid #ccc;
      color: #999;
      border-radius: 50%;
      position: absolute;
      top: 0.2rem;
      left: 0.2rem;
      text-align: center;
      line-height: 0.6rem;
      font-size: 0.4rem;
    }

    .imgText {
      position: absolute;
      left: 1.5rem;
      top: 7rem;
      color: #ccc;
    }
  }

  .detailBox {
    width: 100%;
    height: 2rem;
    background: #fff;
    margin-top: 0.2rem;
    border-radius: 0.2rem;

    .boxPrice {
      display: flex;
      justify-content: space-between;

      .priceLeft {
        margin: 0.4rem 0.6rem 0 0.6rem;
        // font-size: 0.4rem;
        font-weight: bold;

        .lefttwo {
          font-size: 0.4rem;
        }
      }

      .priceRight {
        margin: 0.6rem 0.4rem 0 0;
        color: #999;
      }
    }

    .boxText {
      font-size: 0.34rem;
      font-weight: bold;
      margin-left: 0.6rem;
      margin-top: 0.2rem;
    }
  }

  .detailBox2 {
    width: 100%;
    height: 1rem;
    background: #fff;
    margin-top: 0.3rem;
    border-radius: 0.2rem;
    display: flex;
    line-height: 1rem;

    .boxlis1 {
      margin-left: 0.2rem;
      color: #999;
    }

    .boxlis2 {
      display: flex;
      margin-left: 0.2rem;

      img {
        width: 0.2rem;
        height: 0.2rem;
        margin-top: 0.4rem;
        margin-right: 0.1rem;
      }
    }
  }

  .detailBox3 {
    width: 100%;
    height: 1.3rem;
    background: #fff;
    margin-top: 0.3rem;
    border-radius: 0.2rem;
    display: flex;
    line-height: 1.3rem;
    justify-content: space-between;

    .box3Left {
      width: 2.7rem;
      margin-left: 0.2rem;
      justify-content: space-between;
      display: flex;

      div {
        font-size: 0.3rem;
      }
    }

    .box3Right {
      font-size: 0.3rem;
      margin-right: 0.2rem;
    }
  }
}

.detailbot {
  width: 100%;
  height: 1.4rem;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;

  .botLeft {
    display: flex;
    width: 40%;
    // background: red;
    justify-content: space-evenly;

    .botleftlis {
      margin-top: 0.26rem;

      img {
        width: 0.5rem;
      }
    }
  }

  .botRight {
    width: 60%;
    line-height: 1.5rem;
    // background: blue;
    justify-content: space-around;

    .rightshop {
      width: 1.8rem;
      height: 0.8rem;
      background: black;
      color: #fff;
      margin-top: 0.34rem;
      border-radius: 0.2rem;
    }
  }
}
</style>
<!-- 111 -->
